---
title: "Components"
description: "The components available to use across the Deno documentation."
---

## Search input

Form element for searching the deno domain with google search

```tsx
<comp.SearchInput />
```
<comp.SearchInput />


## Hero

A hero section for the top of a page

```tsx
<comp.Hero bgImage="deno-looking-up.svg">
    <h1>Title text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</comp.Hero>
```

<comp.Hero  bgImage="deno-looking-up.svg">
    <h1>Title text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</comp.Hero>

## Banner

A banner style component for highlighting important information with different colors based on their `type` prop

```tsx

<comp.Banner type="runtime">
<p class="text-lg"><strong>Strong Text</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod</p>
</comp.Banner>
```

<comp.Banner type="runtime">
<p class="text-lg"><strong>Strong Text</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod</p>
</comp.Banner>

## Heading

Headings with a coloured underline based on the `type` prop. Heading level set with  `level` prop

```tsx
<comp.Heading level="2" type="runtime">A secondary heading</comp.Heading>
<comp.Heading level="3" type="runtime">A secondary heading</comp.Heading>
<comp.Heading level="3" type="deploy">A secondary heading</comp.Heading>
<comp.Heading level="3" type="purple">A secondary heading</comp.Heading>
```

<comp.Heading level="2" type="runtime">A secondary heading</comp.Heading>
<comp.Heading level="3" type="runtime">A tertiary heading</comp.Heading>
<comp.Heading level="3" type="deploy">A tertiary heading</comp.Heading>
<comp.Heading level="3" type="purple">A tertiary heading</comp.Heading>


## Theme toggle

Toggle control for flipping the theme

```tsx
<comp.ThemeToggle />
```
<comp.ThemeToggle />

## CTA

Call to action button with different colors based on their `type` prop

```tsx
<comp.CTA href="https://deno.com" type="runtime">Explore Deno</comp.CTA>

<comp.CTA href="https://deno.com" type="jsr">See all packages on JSR</comp.CTA>

<comp.CTA href="https://deno.com" type="deploy">Get started</comp.CTA>
```

<comp.CTA href="https://deno.com" type="runtime">Explore Deno</comp.CTA><br/>

<comp.CTA href="https://deno.com" type="jsr">See all packages on JSR</comp.CTA><br/>

<comp.CTA href="https://deno.com" type="deploy">Get started</comp.CTA><br/>

## Deploy on Deploy

Call to action button with the Deno Deploy logo. Should be used with additional copy.
```tsx
<comp.DeployCTA />
```

Deploy your application to the edge: <comp.DeployCTA />

## Admonition

A box to highlight information. Must be of type
- "caution"
- "tip"
- "info"

```tsx
<comp.Admonition type="info">
  <strong>This is an info admonition</strong>.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</comp.Admonition>
```
<comp.Admonition type="info">
  <strong>This is an info admonition</strong>.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</comp.Admonition>

<comp.Admonition type="caution">
  <strong>This is a caution admonition</strong>.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</comp.Admonition>

<comp.Admonition type="tip">
  <strong>This is a tip admonition</strong>.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</comp.Admonition>

## Columns

A component for displaying content in equal width columns

```tsx
<comp.Columns>
    <div>
        <h4 class="text-lg font-semibold mb-1">Column 1</h4>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a class="homepage-link deploy-link" href="/deploy/kv/manual/">KV docs</a>
    </div>
    <div>
        <h4 class="text-lg font-semibold mb-1">Column 2</h4>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a class="homepage-link deploy-link" href="/deploy/kv/manual/cron">Cron docs</a>
    </div>
    <div>
        <h4 class="text-lg font-semibold mb-1">Column 3</h4>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a class="homepage-link deploy-link" href="/deploy/kv/manual/queue_overview/">Queues docs</a>
    </div>
</comp.Columns>
```
<comp.Columns>
    <div>
        <h4 class="text-lg font-semibold mb-1">Column 1</h4>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a class="homepage-link deploy-link" href="/deploy/kv/manual/">KV docs</a>
    </div>
    <div>
        <h4 class="text-lg font-semibold mb-1">Column 2</h4>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a class="homepage-link deploy-link" href="/deploy/kv/manual/cron">Cron docs</a>
    </div>
    <div>
        <h4 class="text-lg font-semibold mb-1">Column 3</h4>
        <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a class="homepage-link deploy-link" href="/deploy/kv/manual/queue_overview/">Queues docs</a>
    </div>
</comp.Columns>
